<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
  {
    style: {
      navigationBarTitleText: '地址管理',
      "enablePullDownRefresh": false,
    },
  }
  </route>
<template>
  <view class="page">
    <k-list :loading="loading" :is-empty="!addressList.length">
      <view class="pt-2">
        <view class="bg-white rounded-sm p-2 py-3 m-2" v-for="(item, index) in addressList" :key="item.id">
          <view class="font-bold text-md">
            <text>{{ item.contact }}</text>
            <text class="ml-1">{{ item.mobile }}</text>
          </view>
          <view class="flex flex-wrap items-center gap-x-1 text-sm mt-1">
            <text>{{ item.province }}</text>
            <text>{{ item.city }}</text>
            <text>{{ item.district }}</text>
            <text>{{ item.address }}</text>
          </view>
          <view class="flex justify-between items-center mt-1">
            <wd-checkbox :modelValue="item.is_default" :true-value="1" :false-value="0"
              @change="handleChangeDefault($event, index)">
              <text class="text-xs text-[#9A9A9A]">{{ item.is_default ? '已默认' : '设为默认' }}</text>
            </wd-checkbox>
            <view class="flex items-center gap-x-2 text-white">
              <wd-tag type="success" round @click="handleUsedAddress(item)">使用</wd-tag>
              <wd-tag round @click="to(`pages-sub/person/address-form?id=${item.id}`)">修改</wd-tag>
              <wd-tag type="danger" round @click="handleRemoveAddress(index)">删除</wd-tag>
            </view>
          </view>

        </view>
      </view>
    </k-list>

    <FloatBottom>
      <view class="mx-auto h-full flex items-center w-9/10">
        <wd-button block :round="false" custom-class="flex-1"
          @click="to(`pages-sub/person/address-form`)">新增地址</wd-button>
      </view>
    </FloatBottom>
  </view>
</template>

<script setup>
import FloatBottom from '@/components/float-bottom/float-bottom.vue';
import { fetchAddressList, setDefaultAddress, deleteAddress } from "@/service/address";
import useReachBottomLoadMore from "@/hooks/useReachBottomLoadMore";
import { showToast } from "@/utils/uni";
import { to, toBack } from "@/utils/navigation";

const { data: addressList, loading, refresh } = useReachBottomLoadMore(fetchAddressList, {}, '');

const isSelect = ref(0);

function handleSetDefault(i) {
  addressList.value[i].is_default = Number(!addressList.value[i].is_default);

}

function handleChangeDefault({ value }, i) {
  const id = addressList.value[i].id;
  const beforeIndex = addressList.value.findIndex(item => item.is_default == 1);
  setDefaultAddress(id).then(res => {
    if (beforeIndex != -1) handleSetDefault(beforeIndex);
    if (beforeIndex !== i) handleSetDefault(i);
    showToast(res.msg);
  });
}

function handleUsedAddress(item) {
  uni.$emit('usedAddress', item);
  toBack();
}

function handleRemoveAddress(i) {
  uni.showModal({
    title: "提示",
    content: "确定要删除该地址吗?",
    success: (res) => {
      if (res.confirm) {
        const id = addressList.value[i].id;
        deleteAddress(id).then(res => {
          addressList.value = addressList.value.filter(item => item.id != id);
          showToast("删除成功");
        })
      }
    }
  })
}


onShow(() => {
  refresh();
});

onLoad((options) => {
  isSelect.value = Number(options.used);
});

</script>

<style lang="scss" scoped>
.page {
  @include addSafeArea(146rpx);
  min-height: 100vh;
  background-color: #f4f4f4;
}
</style>
